@import '../../styles/common';

$dropzone-padding: rem(15px);
$dropzone-border-style: dashed;
$dropzone-border-color: color('ink', 'lightest');
$dropzone-border-color-disabled: color('sky');
$dropzone-border-radius: border-radius();
$dropzone-background: color('white');
$dropzone-min-height-extra-large: rem(205px);
$dropzone-min-height-large: rem(160px);
$dropzone-min-height-medium: rem(100px);
$dropzone-min-height-small: rem(50px);

$dropzone-overlay-color: color('indigo');
$dropzone-overlay-color-error: color('red');
$dropzone-overlay-border-color: color('indigo');
$dropzone-overlay-border-color-error: color('red');
$dropzone-overlay-background: color('indigo', 'lighter');
$dropzone-overlay-background-error: color('red', 'lighter');
$dropzone-stacking-order: (
  outline: 29,
  overlay: 30,
);

.DropZone {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: $dropzone-background;
  border-radius: $dropzone-border-radius;

  &::after {
    content: '';
    position: absolute;
    z-index: z-index(outline, $dropzone-stacking-order);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: border-width(thick) $dropzone-border-style transparent;
    border-radius: $dropzone-border-radius;
    pointer-events: none;
  }
}

.hasOutline {
  padding: border-width(thick);

  &::after {
    border-color: $dropzone-border-color;
  }

  &:not(.isDisabled) {
    &:hover {
      cursor: pointer;
      background-color: $dropzone-overlay-background;
    }

    // stylelint-disable-next-line selector-max-specificity
    &:hover::after {
      border-color: $dropzone-overlay-border-color;
    }
  }
}

.focused {
  &:not(.isDisabled) {
    background-color: $dropzone-overlay-background;

    &::after {
      border: border-width(thick) $dropzone-border-style
        $dropzone-overlay-border-color;

      @media (-ms-high-contrast: active) {
        border-style: solid;
        border-color: ms-high-contrast-color('selected-text-background');
      }
    }
  }
}

.isDragging {
  &:not(.isDisabled) {
    background-color: $dropzone-overlay-background;

    &::after {
      border-color: $dropzone-overlay-border-color;
    }
  }
}

.isDisabled {
  cursor: not-allowed;

  &::after {
    border-color: $dropzone-border-color-disabled;
  }
}

.sizeExtraLarge {
  min-height: $dropzone-min-height-extra-large;
}

.sizeLarge {
  min-height: $dropzone-min-height-large;
}

.sizeMedium {
  min-height: $dropzone-min-height-medium;
  align-items: center;
}

.sizeSmall {
  padding: 0;
  align-items: center;
  min-height: $dropzone-min-height-small;
}

.Container {
  flex: 1;
}

.Overlay {
  position: absolute;
  z-index: z-index(overlay, $dropzone-stacking-order);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $dropzone-padding;
  border: border-width(thick) $dropzone-border-style $dropzone-overlay-color;
  border-radius: $dropzone-border-radius;
  text-align: center;
  color: $dropzone-overlay-color;
  background-color: $dropzone-overlay-background;

  .hasError & {
    border-color: $dropzone-overlay-border-color-error;
    color: $dropzone-overlay-color-error;
    background-color: $dropzone-overlay-background-error;
  }

  .sizeSmall & {
    padding: 0;
  }
}
